<template>
    <header class="head-nav">
   <el-row>
       <el-col :span="6" class="logo-container">
           <img src="../assets/img/logo.png"  class="logo" alt="">
           <span class="title">校园网络运维系统</span>
       </el-col>
       <el-col :span="6" class="user">
           <div class="userinfo">
              <!--<img :src="user.avatar" class='avatar' alt="">-->
             <!--  <div class='welcome'>
                   <p class='name comename'>欢迎 user</p>

               </div>-->
               <span class='username'>
                        <el-dropdown
                                trigger="click"
                                @command='setDialogInfo'>
                            <span class="el-dropdown-link">
                                欢迎 {{user.name}}
                                <i class="el-icon-caret-bottom el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item command='info'>个人信息</el-dropdown-item>
                                <el-dropdown-item  command='logout'>退出</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                     </span>
           </div>
       </el-col>
   </el-row>
    </header>
</template>
<script>
    export default {
        name:'head-nav',
        computed:{
            user(){
                return this.$store.getters.user;
            }
        },
        methods:{
            setDialogInfo(cmdItem){
                switch (cmdItem) {
                    case 'info':
                        this.showInfoList();
                        break;
                    case 'logout':
                        this.logout();
                        break
                }
            },
            showInfoList(){
                console.log("show");
            },
            logout(){
                this.$confirm('确认退出吗？', '提示', {
                    type: 'warning',
                    center: true
                }).then(() => {
                    //清除token
                    localStorage.removeItem('eleToken');
                    //设置vuex store
                    this.$store.dispatch('clearCurrentState')
                    //路由跳转
                    this.$router.push("/");
                })
            }
        }
    }
</script>
<style scoped>
    .head-nav {
        width: 100%;
        height: 60px;
        min-width: 600px;
        padding: 5px;
        background: #324057;
        color: #fff;
        border-bottom: 1px solid #1f2d3d;
    }
    .logo-container {
        line-height: 60px;
        min-width: 400px;
    }
    .logo {
        height: 60px;
        width: 170px;
        margin-right: 5px;
        vertical-align: middle;
        display: inline-block;
    }
    .title {
        font-size: 22px;
        font-family: "Microsoft YaHei";

    }
    .user {
        line-height: 60px;
        text-align: right;
        float: right;
        padding-right: 10px;
        min-width: 200px;
    }
    .avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        vertical-align: middle;
        display: inline-block;
    }
    .welcome {
        display: inline-block;
        width: auto;
        vertical-align: middle;
        padding: 0 5px;
    }
    .name {
        line-height: 20px;
        text-align: center;
        font-size: 14px;
    }
    .comename {
        font-size: 12px;
    }
    .avatarname {
        color: #409eff;
        font-weight: bolder;
    }
    .username {
        cursor: pointer;
        margin-right: 5px;
    }
    .el-dropdown {
        color: #fff;
    }
</style>